<script setup>
import { ref, reactive, onMounted } from 'vue'
import { Product } from '@/api';
import { ElMessage } from 'element-plus';
import Upload_Img from '@/components/new-components/Upload.vue'

let load_form = ref({
    is_reply: '',
    data: '',
    store_name: '',
    key: '',
    order: '',
    account: '',
    product_id: 0,
    page: 1,
    limit: 15,
});
// 评论列表
let tableData = ref([]);
let reply_count = ref(0);
let load_reply_list = async (form) => {
    let { status, msg, data } = await Product.product_reply(form);
    console.log(status, msg, data);
    tableData.value = data.list;
    reply_count.value = data.count;
}
onMounted(() => {
    load_reply_list();
})
// 搜索
let handle_data = () => {
    load_reply_list(load_form.value)
}
let search_reply = () => {
    load_reply_list(load_form.value)
}
// 回复
let is_reply = ref(false);
let content = ref('');
let rply_id = ref(0)
let open_reply_dialog = (id) => {
    is_reply.value = true;
    rply_id.value = id;
}
let handle_reply = async () => {
    let { status, msg } = await Product.product_set_reply(rply_id.value, { content: content.value })
    if (status) {
        ElMessage.success(msg);
        load_reply_list();
        is_reply.value = false
    }
}
// 删除
let remove_reply = async (id) => {
    ElMessageBox.confirm(
        '是否确认删除?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            let { status, msg } = await Product.remove_reply(id)
            if (status == 200) {
                ElMessage.success(msg)
                load_reply_list();
            } else {
                ElMessage.error(msg)
            }
        })
        .catch(() => {
            ElMessage.info('取消')
        })
}
// 添加自评
let is_add_reply = ref(false)
let add_reply_form = ref({})
let handle_add_reply = async () => {
    is_add_reply.value = true;
    let { status, msg, data } = await Product.product_fictitious_reply(0);
    if (status) {
        console.log(data);
        add_reply_form.value = data;
    }
}
// 添加自评--选择商品
const formInline = reactive({
    page: 1,
    limit: 15,
    cate_id: '',
    store_name: '',
    is_new: '',
})
let product_form = ref({});
let load_reply_product = async () => {
    let { status, msg, data } = await Product.reply_product_list(formInline);
    product_form.value = data;
    console.log(data);
}
let add_reply_choose = ref(false);
let open_choose_product = () => {
    add_reply_choose.value = true;
    load_product_cate();
    load_reply_product();
}
// 加载分类列表
let product_cate = ref([])
let load_product_cate = async () => {
    let { status, msg, data } = await Product.category_tree(0);
    if (status) {
        product_cate.value = data;
    }
}
let form = ref({
    image: {
        image: '',
        product_id: 0,
    },
    avatar: '',
    comment: '',
    nickname: '',
    pics: [],
    product_score: 0,
    service_score: 0,
    add_time: '',
})
let pro_id=ref(0);
const handleCurrentChange = (val) => {
    add_reply_choose.value = false;
    console.log(val);
    add_reply_form.value.rules[0].value = val.image;
    pro_id.value = val.id;
}

// 添加
let handle_add = async () => {
    form.value = {
        avatar: add_reply_form.value.rules[1].value,
        comment: add_reply_form.value.rules[3].value,
        image: {
            image: add_reply_form.value.rules[0].value,
            product_id: pro_id.value,
        },
        nickname: add_reply_form.value.rules[2].value,
        pics: add_reply_form.value.rules[6].value,
        product_score: add_reply_form.value.rules[4].value,
        service_score: add_reply_form.value.rules[5].value,
        add_time: add_reply_form.value.rules[7].value,
    };
    console.log(form.value);
     let {status,msg,data}=await Product.save_fictitious_reply(form.value);
     if(status){
        is_add_reply.value=false
        load_reply_list()
     }
}

// 分页
let handlePage = (current) => {
    load_form.value.page = current;
    load_reply_list(load_form.value)
}
</script>
<template>
    <el-card class="box-card">
        <template #header>
            <span>商品评论管理</span>
        </template>
        <el-form :inline="true" :model="load_form" class="demo-form-inline">
            <el-form-item label="评论时间">
                <el-radio-group v-model="load_form.data" @change="handle_data">
                    <el-radio-button label="" value="">全部</el-radio-button>
                    <el-radio-button label="today" value="today">今天</el-radio-button>
                    <el-radio-button label="yesterday" value="yesterday">昨天</el-radio-button>
                    <el-radio-button label="lately7" value="lately7">最近7天</el-radio-button>
                    <el-radio-button label="lately30" value="lately30">最近30天</el-radio-button>
                    <el-radio-button label="month" value="month">本月</el-radio-button>
                    <el-radio-button label="year" value="year">本年</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-date-picker v-model="load_form.data" type="daterange" @change="handle_data"
                    start-placeholder="Start date" end-placeholder="End date" />
            </el-form-item>
        </el-form>
        <el-form :inline="true" :model="load_form" class="demo-form-inline">
            <el-form-item label="商品分类">
                <el-select v-model="load_form.is_reply" clearable @change="handle_data" placeholder="请选择商品分类">
                    <el-option label="已回复" :value="1"></el-option>
                    <el-option label="未回复" :value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品信息">
                <el-input v-model="load_form.store_name" style="width: 80%;" placeholder="请输入商品信息" />
            </el-form-item>
            <el-form-item style="width: 30%;" label="用户名称">
                <el-input v-model="load_form.account" style="width: 80%;" placeholder="请输入用户名称" />

            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search_reply">搜索</el-button>
            </el-form-item>
        </el-form>
        <div class="d-flex">
            <el-button type="primary" @click="handle_add_reply">添加自评</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%;margin-top: 15px;" :header-cell-style="{backgroundColor:'#ececec'}">
            <el-table-column prop="id" label="评论ID" />
            <el-table-column label="商品信息" width="240">
                <template #default="scope" style="display: flex; align-items: center;">
                    <el-row>
                        <el-col :span="6"><el-image style="width: 36px; " :src="scope.row.image"></el-image></el-col>
                        <el-col :span="18">{{ scope.row.store_name }}</el-col>
                    </el-row>

                </template>
            </el-table-column>
            <el-table-column prop="account" label="用户名称" />
            <el-table-column prop="score" label="评分" />
            <el-table-column prop="comment" label="评价内容" />
            <el-table-column prop="merchant_reply_content" label="回复内容" />
            <el-table-column prop="add_time" label="评价时间" />
            <el-table-column label="操作" width="120">
                <template #default="scope">
                    <el-button link type="primary" @click="open_reply_dialog(scope.row.id)" size="small">回复</el-button>
                    <el-button link type="primary" @click="remove_reply(scope.row.id)" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-row style="margin-top: 20px;" justify="end" align="middle">
            <span style="margin-right: 10px;">共 {{ reply_count }} 条</span>
            <el-pagination @current-change="handlePage" :page-size="load_form.limit" background
                layout="prev, pager, next,jumper" :total="reply_count / load_form.limit" />
        </el-row>
    </el-card>
    <!-- 回复 -->
    <el-dialog v-model="is_reply" title="回复评论">
        <el-input v-model="content" :rows="3" type="textarea" />
        <template #footer>
            <el-button @click="handle_reply" type="primary" size="small">确定</el-button>
        </template>
    </el-dialog>
    <!-- 添加自评 -->
    <el-dialog v-model="is_add_reply" :title="add_reply_form.title">
        <el-form :model="add_reply_form.rules" label-width="80px">
            <el-form-item v-for="item in add_reply_form.rules" :label="item.title" :value="item.value" :prop="item.field">
                <el-input v-if="item.type === 'input'" v-model="item.value" :type="item.props.type"
                    :placeholder="item.props.placeholder" style="width: 30%;"></el-input>
                <div v-if="item.field === 'image'" @click="open_choose_product"
                    style="border: 1px solid black; height: 50px; width: 50px; display: flex; justify-content: center; align-items: center;">
                    <el-icon v-show="!item.value">
                        <Plus></Plus>
                    </el-icon>
                    <el-image :src="item.value" v-show="item.value"></el-image>
                </div>

                <Upload_Img v-if="item.type === 'frame' && item.field !== 'image'" v-model="item.value"></Upload_Img>
                <el-rate v-if="item.type === 'rate'" v-model="item.value" />
                <el-date-picker v-if="item.type === 'datePicker'" v-model="item.value" :type="item.props.type"
                    :placeholder="item.props.placeholder" />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="handle_add" type="primary" size="small">确定</el-button>
        </template>
    </el-dialog>
    <!-- 添加自评-选择商品 -->
    <el-dialog v-model="add_reply_choose" title="请选择商品">
        <el-form :inline="true" label-width="80px" :model="formInline">
            <el-form-item label="商品分类">
                <el-select clearable v-model="formInline.pid" placeholder="请选择商品分类"
                    :popper-options="{ modifiers: [{ name: 'computeStyles', options: { adaptive: false } }] }">
                    <el-option v-for="item in product_cate" :label="item.cate_name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="商品搜索" prop="cate_name">
                <el-input v-model="formInline.cate_name" style="width: 80%;" placeholder="请输入商品名称/关键字/ID">
                    <template #append>
                        <el-button>
                            <el-icon>
                                <Search></Search>
                            </el-icon>
                        </el-button>
                    </template>
                </el-input>
            </el-form-item>
        </el-form>
        <el-table highlight-current-row @current-change="handleCurrentChange" :data="product_form.list" style="width: 100%">
            <el-table-column type="index" width="50" label="#">
            </el-table-column>
            <el-table-column prop="id" label="商品ID" width="100" />
            <el-table-column label="图片" width="100">
                <template #default="scope" style="display: flex; align-items: center;">
                    <el-image style="width: 36px; " :src="scope.row.image"></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="store_name" label="商品名称" />
            <el-table-column prop="cate_name" label="商品分类" />
        </el-table>
        <el-row style="margin-top: 20px;" justify="end" align="middle">
            <span style="margin-right: 10px;">共 {{ product_form.count }} 条</span>
            <el-pagination @current-change="" :page-size="formInline.limit" background layout="prev, pager, next,jumper"
                :total="product_form.count / formInline.limit" />
        </el-row>
    </el-dialog>
</template>